<template>
	<div class="search">
		<div class="search1">
			<span class="fa fa-search tubiao" @click="aa">
				<input type="text" v-model="search"></span>
		</div>
		<div class="yinshi">
			<h4>电影/电视剧/综艺</h4>
		</div>
		<div class="dianshi">
			<ul v-for="list in searchData" :key="list.id">
				<li>
					<div class="first">
						<img :src='"/images/"+list.img' alt="">
					</div>
					<div class="second">
						<p class="title">{{list.title}}</p>
						<p class="actors ">{{list.leiixing}}</p>
						<p class="actors">未来30天内上映</p>
					</div>
					<div>
						<h2>{{list.score}}</h2>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'search',
		data() {
			return {
				search: '',
				searchData: '',
				dianyinglist: [{
						title: '机械师2：复活',
						img: '001.png',
						leiixing: '剧情，喜剧,犯罪',
						score: '8.0'
					},
					{
						title: '敢死队',
						img: '002.png',
						leiixing: '剧情，喜剧',
						score: '9.0'
					},
					{
						title: '最后的巫师猎人',
						img: '003.png',
						leiixing: '剧情，喜剧',
						score: '9.9'
					},
					{
						title: '饥饿游戏3',
						img: '004.png',
						leiixing: '剧情，喜剧',
						score: '8.3'
					},
					{
						title: '钢铁骑士',
						img: '005.png',
						leiixing: '剧情，喜剧',
						score: '7.0'
					},
				]
			}
		},
		methods: {
			aa() {
				var search = this.search;
				if (search) {
					this.searchData = this.dianyinglist.filter(function(product) {
						console.log(product)
						return Object.keys(product).some(function(key) {
							console.log(key)
							return String(product[key]).toLowerCase().indexOf(search) > -1

						})
					})
					this.search = ''
				}

			}

		}
	}
</script>

<style scoped>
	.search1 {
		background: #f0f0f0;
		height: 40px;
		line-height: 40px;
	}

	span {
		padding-left: 12px;
		width: 80%;
	}

	input {
		margin-left: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		width: 80%;
		height: 20px;
		outline: none;
	}

	h4 {
		margin: 10px;
		color: #777;
	}

	.yinshi {
		border-bottom: 1px solid rgb(224, 224, 224);

	}

	.dianshi {
		width: 100%;
		margin-bottom: 35px;
	}

	img {
		width: 80px;
	}

	li {
		padding: 8px;
		overflow: hidden;
		border-bottom: 1px dashed #ccc;

	}

	.dianshi div {
		float: left;
	}

	.first {
		width: 23%;
	}

	.second {
		width: 60%;
		margin-top: 10px;
	}

	.actors {
		font-weight: bold;
		font-size: 14px;
	}

	.title {
		font-size: 20px;
		font-weight: bold;
	}

	p {
		line-height: 25px;
	}

	.score {
		color: #F90;
		margin-left: 5px;
		font-weight: bold;
	}

	h2 {
		color: #F90;
	}
</style>
